<template>
  <div class="homePage">
    <div class="part1">
      <div class="box1">
      <span class="s1">
        PowerWave：诊断和分析解决方案
      </span>
      </div >
      <div class="box2">
      <span>欢迎来到示功图故障诊断，这是诊断和分析电源图图像和数据的最终目的地，具有机器管理、故障诊断、统计分析、实时监控等功能，所有这些都包含在一个很酷的蓝色色调包中。</span>
        <el-button type="primary" class="button2" @click="service">查看所有服务</el-button>
      </div>
      <img class="photo1" src="../assets/img/photo1.png" alt="">
    </div>
    <div class="part2">
      <div class="part02">
        <span class="s3">
          受到众多工程专业人士的信赖
        </span>
        <div class="s4">
        </div>
        <div class="s5">
        <p>
          该网站为功率曲线图像和数据提供了全面的诊断工具和分析，使用户能够轻松管理、诊断和分析机器性能，而蓝色配色方案则为整体体验增添了舒缓和专业的触感。
        </p>
          <img src="../assets/img/part22.png" alt="" style="width: 400px;height: 250px;
         position: relative;top:-150px;margin-left:140%;border-radius: 5px" >
      </div>
      </div>
    </div>
    <div class="part3">
      <div>
        <span class="s6">
          我们的服务
        </span>
        <el-button type="primary" class="button3"  @click="service">查看所有服务</el-button>
      </div>
      <div class="flex-container">
        <div class="flex-item">
          <img src="../assets/img/part301.png " alt="" class="part301" >
          <h4 class="part3-text">
            功能分析和故障诊断
          </h4>
          <p class="s7">
            用户使用pc端传入带电参数的csv文件或者示功图文件，进行故障诊断，获取机器状态并储存到机器管理页面。
          </p>
          <router-link to='/discern' class="link">阅读更多</router-link>
        </div>
        <div class="flex-item">
          <img src="../assets/img/part302.png " alt="" class="part301" >
          <h4 class="part3-text">
            故障分析和数据洞察
          </h4>
          <p class="s7">
            将用户近一个月来上传的数据进行统计分析，并给出建议.
          </p>
          <router-link to='/data' class="link" tag="div" >阅读更多</router-link>
        </div>
        <div class="flex-item">
          <img src='../assets/img/part303.png ' alt="" class="part301" >
          <h4 class="part3-text">
            机械管理
          </h4>
          <p class="s7">
            将用户传入的数据和模型分类出的诊断结果进行储存并跟进故障处理进度。
          </p>
          <router-link to='/manage' tag="div" class="link">阅读更多</router-link>
        </div>
      </div>
      </div>
      <div class="part3-1">
        <img src="../assets/img/hr1.png" class="hr1" alt="" >
        <span class="s8">特点和优点</span>
        <img src="../assets/img/hr1.png" class="hr1" alt="" >
          <div class="advantage">
            <div class="box01">
              <span class="s9">
                特征
              </span>
              <div class="tb">
              <img  class="tb1" src="../assets/img/tb.png" alt="">
                <p class="s10">计算机管理页面：允许用户管理和跟踪其计算机，包括添加新计算机、编辑计算机详细信息和查看计算机状态。</p>
            </div>
              <div class="tb">
                <img  class="tb1" src="../assets/img/tb.png" alt="">
                <p class="s10">故障诊断页面：分析输入的电源图图像或Excel文件，识别和诊断故障，提供详细的结果和故障排除建议。</p>
              </div>
              <div class="tb">
                <img  class="tb1" src="../assets/img/tb.png" alt="">
                <p class="s10">统计分析页面：根据采集到的数据生成各种统计分析报表，如每月故障频率、故障频发机器等相关洞察。</p>
              </div>
              <div class="tb">
                <img  class="tb1" src="../assets/img/tb.png" alt="">
                <p class="s10">实时监控页面：为用户提供机器性能和状态的实时视图，包括实时功率图、传感器读数和任何异常警报。</p>
              </div>
              <div class="tb">
                <img  class="tb1" src="../assets/img/tb.png" alt="">
                <p class="s10">数据库集成：自动将分析的数据存储并更新到数据库中，允许用户在机器管理页面上轻松访问和管理机器信息。</p>
              </div>
            </div>
            <div class="box01">
              <span class="s9">
                好处
              </span>
              <div class="tb">
                <img  class="tb2" src="../assets/img/tb.png" alt="">
                <p class="s10">方便且用户友好的平台，用于诊断和分析功率曲线图像和数据</p>
              </div>
              <div class="tb">
                <img  class="tb2" src="../assets/img/tb.png" alt="">
                <p class="s10">高效的机器管理，通过专用页面来监控和跟踪机器性能。</p>
              </div>
              <div class="tb">
                <img  class="tb3" src="../assets/img/tb.png" alt="">
                <p class="s10">通过专门的页面进行准确及时的故障诊断。</p>
              </div>
              <div class="tb">
                <img  class="tb2" src="../assets/img/tb.png" alt="">
                <p class="s10">详细的统计分析，以识别机器故障的趋势和模式。</p>
              </div>
              <div class="tb">
                <img  class="tb3" src="../assets/img/tb.png" alt="">
                <p class="s10">实时监控，确保及时发现和解决问题。</p>
              </div>

            </div>
            <div class="box01">
              <img src="../assets/img/part305.png" class="part305" alt="">
            </div>
          </div>
    </div>
    <div class="part4" >
      <span class="s11">我们的团队</span>
      <p class="s12">示功图故障诊断团队是一群技术爱好者，他们热衷于开发一个用户友好的网络平台，用于诊断测功机图形和数据中的故障，提供机器管理、实时监控和统计分析功能，同时保持悠闲和非正式的方法。</p>
      <div class="part4-c">
        <span style="font-size:45px">
          满足的客户
        </span>
        <p class="s14">
          我们提供了一个易于使用的网络平台，用于诊断和分析功率图图像和数据，提供故障结果和实时监控，所有这些都以用户友好的界面呈现，并采用凉爽的蓝色配色方案。
        </p>
        <el-button type="primary" style="background-color: #0062cc;width: 200px;height: 60px;margin-top: 30px" @click="service">查看所有服务</el-button>
      </div>
    <img src="../assets/img/part403.png" alt=""  class="part403" >
    </div>
  </div>
</template>

<script>
export default {
  name: "homePage",
  methods: {
    service() {
      this.$router.push('/home/service')
    }
  }
}
</script>

<style scoped>

.part1{
  height: 420px;
  background-color:rgba(151, 171, 215, 0.12);
  padding-top: 60px;
  text-align: center ;
}
.part2{
  height: 350px;
  overflow: hidden;
}
.s1{
  font-size: 56px;
  font-weight: normal;
  width:100px;
  height: 100px;


}
.photo1{
  width: 340px;
  height: 340px;
  position: absolute;
  right: 230px;
  top:150px;
  border-radius: 10px;
}
.box1{
  width: 500px;
  text-align: left ;
  position: absolute;
  left: 170px;
  top:180px;
}
.box2{
  width: 500px;
  font-size: 10px;
  color: #515a6e;
  text-align: left ;
  position: absolute;
  left: 170px;
  top:350px;
}
.button2{
  position: absolute;
  top:100px;
  left: 10px;
  width: 140px;
  height: 55px;
  background-color: #0062cc;

}

.s3{
  font-size: 30px;
  font-weight:normal;
  margin-bottom: 20px;
}
.s4{
  color: #3A7734;
  font-size: 18px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.s5{
  width: 500px;
  font-size: 15px;
  color: #515a6e;
}
.part02{
  width: 900px;
 margin-right: 0;
  margin-left: 200px;
  margin-top: 60px;
}
.part3{
  height: 700px;
  background-color:rgba(151, 171, 215, 0.12) ;
  margin-bottom: 0;

}
.part3-1{
  position: relative;
  top:-10%;
  background-color:rgba(151, 171, 215, 0.12) ;
  height: 650px;

}
.part3-text{
  font-weight: normal;
}
.part4{
  height: 600px;
  margin-left: 160px;
  margin-right: 160px;
  margin-top: 40px;
}
.s6{
  font-size: 40px;
  font-weight: normal;
  margin-left: 180px;
  position: relative;
  top:100px;
}
.button3{
  position: absolute;
  left: 73%;
  top:1000px;
  width: 140px;
  height: 55px;
  background-color: #0062cc;
}
.flex-container {
  height: 400px;
  margin-left: 150px;
  margin-right: 150px;
  margin-top: 140px;
  clear:both;
}

.flex-item {
  width: 30%;
  height: 400px;
  margin: 15px;
  float: left;
}
.part301{
  width: 330px;
  height: 330px;
}
.s7{
  font-size: 15px;
  color: #515a6e;
  position: relative;
  top:10px;
}
.link{
  color: #0062cc;
  position: relative;
  top:10px;
  font-size: 15px;
}
a{
  text-decoration: none;
}
.hr1{
  width: 35%;
  height: 20px;
  position: relative;
  left: 148px;
  top:20px;
  margin-left: 20px;

}
.s8{
  font-size: 15px;
  color: #515a6e;
  position: relative;
  top:10px;
  left: 157px;
}
.advantage  {
  height: 250px;
  margin-left: 150px;
  margin-right: 150px;
  margin-top: 50px;
}

.box01 {
  float: left;
  width: 29%;
  height: 400px;
  margin: 20px;
}
.tb{
  margin-right: 30px;
  position: relative;
  top:40px;
}
.tb1{
  width: 20px;
  height: 20px;
}
.tb2{
  width: 20px;
  height: 20px;
  position: relative;
  top:-10px;

}
.tb3 {
  width: 20px;
  height: 20px;
  position: relative;
  top: -20px;
}
.s9{
  font-size: 30px;
  font-weight: normal;
}
.s10{
  font-size: 15px;
  color: #515a6e;
  position: relative;
  left: 30px;
  top:-50px;
  line-height: 25px;
}
.part305{
  width: 370px;
  height: 370px;
  border-radius: 10px;
}
.s11{
  font-size:45px;
}
.s12{
  font-size: 15px;
  line-height: 20px;
  color: #515a6e;
}
.part4-c{
  position: relative;
  top:100px;
  left:-5px;
}

.s14{
  width: 500px;
  font-size: 15px;
  color:#515a6e;
  margin-top: 20px;
  line-height: 25px;
}
.part403{
  width: 540px;
  height: 400px;
  margin-left: 700px;
  position: relative;
  top:-200px;
  right: 100px;
  border-radius: 5px;
}
</style>